<template>
  <div class="recommendation-detail-panel">
    <!-- 用户基本信息 -->
    <div class="user-info-section">
      <h3>用户基本信息</h3>
      <el-row :gutter="24">
        <el-col :span="12">
          <div class="info-item">
            <span class="label">用户ID:</span>
            <span class="value">{{ recommendation.userId }}</span>
          </div>
          <div class="info-item">
            <span class="label">用户姓名:</span>
            <span class="value">{{ recommendation.userName }}</span>
          </div>
          <div class="info-item">
            <span class="label">推荐算法:</span>
            <el-tag :type="getAlgorithmTagType(recommendation.algorithm)">
              {{ getAlgorithmDisplayName(recommendation.algorithm) }}
            </el-tag>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="info-item">
            <span class="label">推荐产品数:</span>
            <span class="value">{{ recommendation.recommendedItems }}</span>
          </div>
          <div class="info-item">
            <span class="label">点击率:</span>
            <span class="value">{{ recommendation.clickRate }}%</span>
          </div>
          <div class="info-item">
            <span class="label">转化率:</span>
            <span class="value">{{ recommendation.conversionRate }}%</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 推荐产品详情 -->
    <div class="recommended-products-section">
      <h3>推荐产品详情</h3>
      <div class="products-list">
        <div 
          v-for="product in recommendation.recommendedProducts" 
          :key="product.id"
          class="product-card"
          :class="{ clicked: product.clicked, purchased: product.purchased }"
        >
          <div class="product-header">
            <h4>{{ product.name }}</h4>
            <div class="product-score">
              <span class="score-label">推荐分数:</span>
              <el-progress 
                :percentage="Math.round(product.score * 100)" 
                :stroke-width="8"
                :color="getScoreColor(product.score)"
                :show-text="false"
              />
              <span class="score-value">{{ product.score.toFixed(2) }}</span>
            </div>
          </div>
          <div class="product-status">
            <el-tag v-if="product.clicked" type="success" size="small">已点击</el-tag>
            <el-tag v-if="product.purchased" type="warning" size="small">已购买</el-tag>
            <el-tag v-if="!product.clicked && !product.purchased" type="info" size="small">未点击</el-tag>
          </div>
        </div>
      </div>
    </div>

    <!-- 用户画像信息 -->
    <div class="user-profile-section" v-if="recommendation.userProfile">
      <h3>用户画像</h3>
      <el-row :gutter="24">
        <el-col :span="12">
          <div class="profile-card">
            <h4>基础信息</h4>
            <div class="profile-item">
              <span class="profile-label">年龄:</span>
              <span class="profile-value">{{ recommendation.userProfile.age }}岁</span>
            </div>
            <div class="profile-item">
              <span class="profile-label">性别:</span>
              <span class="profile-value">{{ recommendation.userProfile.gender }}</span>
            </div>
            <div class="profile-item">
              <span class="profile-label">地区:</span>
              <span class="profile-value">{{ recommendation.userProfile.location }}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="profile-card">
            <h4>偏好分析</h4>
            <div class="preferences-list">
              <el-tag 
                v-for="preference in recommendation.userProfile.preferences" 
                :key="preference"
                class="preference-tag"
              >
                {{ preference }}
              </el-tag>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 推荐效果分析 -->
    <div class="recommendation-analysis-section">
      <h3>推荐效果分析</h3>
      <el-row :gutter="16">
        <el-col :span="6">
          <div class="analysis-card">
            <div class="analysis-icon">
              <el-icon><View /></el-icon>
            </div>
            <div class="analysis-content">
              <h4>{{ getClickedCount() }}</h4>
              <p>点击产品数</p>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="analysis-card">
            <div class="analysis-icon">
              <el-icon><ShoppingCart /></el-icon>
            </div>
            <div class="analysis-content">
              <h4>{{ getPurchasedCount() }}</h4>
              <p>购买产品数</p>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="analysis-card">
            <div class="analysis-icon">
              <el-icon><Money /></el-icon>
            </div>
            <div class="analysis-content">
              <h4>¥{{ recommendation.revenue.toLocaleString() }}</h4>
              <p>产生收入</p>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="analysis-card">
            <div class="analysis-icon">
              <el-icon><TrendCharts /></el-icon>
            </div>
            <div class="analysis-content">
              <h4>{{ getAverageScore() }}</h4>
              <p>平均推荐分数</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 推荐优化建议 -->
    <div class="optimization-suggestions-section">
      <h3>推荐优化建议</h3>
      <div class="suggestions-list">
        <div 
          v-for="(suggestion, index) in optimizationSuggestions" 
          :key="index"
          class="suggestion-item"
        >
          <el-icon class="suggestion-icon"><Lightbulb /></el-icon>
          <div class="suggestion-content">
            <h4>{{ suggestion.title }}</h4>
            <p>{{ suggestion.description }}</p>
          </div>
          <div class="suggestion-priority">
            <el-tag :type="suggestion.priority">
              {{ getPriorityText(suggestion.priority) }}
            </el-tag>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button type="primary" @click="updateRecommendation">更新推荐</el-button>
      <el-button @click="viewUserProfile">查看用户画像</el-button>
      <el-button @click="exportRecommendationData">导出推荐数据</el-button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { ElMessage } from 'element-plus'
import { View, ShoppingCart, Money, TrendCharts, Lightbulb } from '@element-plus/icons-vue'

// Props
const props = defineProps({
  recommendation: {
    type: Object,
    required: true
  }
})

// Emits
const emit = defineEmits(['update-recommendation', 'view-profile', 'export-data'])

// 计算属性
const optimizationSuggestions = computed(() => [
  {
    title: '提高产品多样性',
    description: '当前推荐产品类别较为集中，建议增加不同类别产品的推荐比例',
    priority: 'warning'
  },
  {
    title: '优化推荐时机',
    description: '根据用户活跃时间调整推荐发送时机，提高点击率',
    priority: 'primary'
  },
  {
    title: '个性化程度提升',
    description: '结合用户最新行为数据，进一步提升推荐的个性化程度',
    priority: 'success'
  }
])

// 方法
const getAlgorithmDisplayName = (algorithm) => {
  const nameMap = {
    'collaborative': '协同过滤',
    'content': '内容推荐',
    'hybrid': '混合推荐',
    'deep_learning': '深度学习'
  }
  return nameMap[algorithm] || algorithm
}

const getAlgorithmTagType = (algorithm) => {
  const typeMap = {
    'collaborative': 'primary',
    'content': 'success',
    'hybrid': 'warning',
    'deep_learning': 'danger'
  }
  return typeMap[algorithm] || 'info'
}

const getScoreColor = (score) => {
  if (score >= 0.8) return '#67C23A'
  if (score >= 0.6) return '#E6A23C'
  return '#F56C6C'
}

const getClickedCount = () => {
  return props.recommendation.recommendedProducts?.filter(p => p.clicked).length || 0
}

const getPurchasedCount = () => {
  return props.recommendation.recommendedProducts?.filter(p => p.purchased).length || 0
}

const getAverageScore = () => {
  const products = props.recommendation.recommendedProducts || []
  if (products.length === 0) return '0.00'
  
  const totalScore = products.reduce((sum, product) => sum + product.score, 0)
  return (totalScore / products.length).toFixed(2)
}

const getPriorityText = (priority) => {
  const textMap = {
    'primary': '高优先级',
    'warning': '中优先级',
    'success': '低优先级'
  }
  return textMap[priority] || '普通'
}

const updateRecommendation = () => {
  emit('update-recommendation', props.recommendation)
}

const viewUserProfile = () => {
  emit('view-profile', props.recommendation)
  ElMessage.info('跳转到用户画像页面')
}

const exportRecommendationData = () => {
  emit('export-data', props.recommendation)
}
</script>

<style scoped>
.recommendation-detail-panel {
  padding: 20px 0;
}

.user-info-section,
.recommended-products-section,
.user-profile-section,
.recommendation-analysis-section,
.optimization-suggestions-section {
  margin-bottom: 32px;
}

.user-info-section h3,
.recommended-products-section h3,
.user-profile-section h3,
.recommendation-analysis-section h3,
.optimization-suggestions-section h3 {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 8px;
}

/* 基本信息 */
.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}

.info-item .label {
  width: 100px;
  color: #666;
  font-size: 14px;
}

.info-item .value {
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

/* 推荐产品 */
.products-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-card {
  padding: 16px;
  border-radius: 8px;
  border: 2px solid #f0f0f0;
  transition: all 0.3s ease;
}

.product-card.clicked {
  border-color: #67C23A;
  background: #f0f9ff;
}

.product-card.purchased {
  border-color: #E6A23C;
  background: #fffbeb;
}

.product-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.product-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.product-score {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
}

.score-label {
  font-size: 12px;
  color: #666;
}

.score-value {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  min-width: 35px;
}

.product-status {
  display: flex;
  gap: 8px;
}

/* 用户画像 */
.profile-card {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.profile-card h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.profile-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.profile-label {
  font-size: 14px;
  color: #666;
}

.profile-value {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.preferences-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.preference-tag {
  margin: 0;
}

/* 效果分析 */
.analysis-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  text-align: center;
}

.analysis-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #409EFF;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.analysis-content h4 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 700;
  color: #333;
}

.analysis-content p {
  margin: 0;
  font-size: 12px;
  color: #666;
}

/* 优化建议 */
.suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.suggestion-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: #f0f9ff;
  border-radius: 8px;
}

.suggestion-icon {
  color: #409EFF;
  font-size: 18px;
  margin-top: 2px;
}

.suggestion-content {
  flex: 1;
}

.suggestion-content h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.suggestion-content p {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.suggestion-priority {
  margin-top: 2px;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

@media (max-width: 768px) {
  .action-buttons {
    flex-direction: column;
  }
  
  .action-buttons .el-button {
    width: 100%;
  }
  
  .product-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .product-score {
    width: 100%;
  }
}
</style>
